<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GD32 Demo Button Project</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem 0; text-align: center; }
        h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
        .subtitle { font-size: 1.2rem; opacity: 0.9; }
        .nav { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
        .nav-links { display: flex; justify-content: center; gap: 2rem; }
        .nav-links a { text-decoration: none; color: #333; font-weight: 500; padding: 0.5rem 1rem; border-radius: 5px; transition: all 0.3s; }
        .nav-links a:hover { background: #667eea; color: white; }
        .section { margin: 3rem 0; padding: 2rem; background: #f8f9fa; border-radius: 10px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; }
        .card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .code-block { background: #2d3748; color: #e2e8f0; padding: 1rem; border-radius: 5px; overflow-x: auto; font-family: 'Courier New', monospace; }
        .feature { text-align: center; padding: 1rem; }
        .feature-icon { font-size: 3rem; margin-bottom: 1rem; }
        .btn { display: inline-block; background: #667eea; color: white; padding: 0.8rem 2rem; text-decoration: none; border-radius: 5px; transition: all 0.3s; }
        .btn:hover { background: #5a67d8; transform: translateY(-2px); }
        .project-tree { font-family: monospace; background: #f1f5f9; padding: 1rem; border-radius: 5px; }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>GD32 Demo Button Project</h1>
            <p class="subtitle">基于STM32F4xx的按键演示项目</p>
        </div>
    </header>

    <nav class="nav">
        <div class="container">
            <div class="nav-links">
                <a href="#overview">项目概述</a>
                <a href="#structure">项目结构</a>
                <a href="#features">功能特点</a>
                <a href="#code">代码展示</a>
                <a href="#demo">在线演示</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <section id="overview" class="section">
            <h2>项目概述</h2>
            <p>这是一个基于STM32F4xx微控制器的按键演示项目，展示了嵌入式系统中按键处理和LED控制的基本功能。项目采用模块化设计，代码结构清晰，适合学习嵌入式开发。</p>
            
            <div class="grid">
                <div class="card">
                    <h3>🎯 项目目标</h3>
                    <p>演示STM32按键检测、防抖处理和LED控制的完整解决方案</p>
                </div>
                <div class="card">
                    <h3>🔧 开发环境</h3>
                    <p>Keil MDK-ARM + STM32 HAL库 + STM32F429xx微控制器</p>
                </div>
                <div class="card">
                    <h3>📚 学习价值</h3>
                    <p>适合嵌入式初学者学习按键处理和任务调度机制</p>
                </div>
            </div>
        </section>

        <section id="structure" class="section">
            <h2>项目结构</h2>
            <div class="project-tree">
GD32_Demo_Botton/
├── APP/                    # 应用层代码
│   ├── key_app.c/h        # 按键应用处理
│   ├── led_app.c/h        # LED应用处理  
│   ├── scheduler.c/h      # 任务调度器
│   └── mydefine.h         # 自定义宏定义
├── Components/             # 组件库
│   └── ebtn/              # 增强按键组件
│       ├── ebtn.c/h       # 按键驱动实现
│       └── bit_array.h    # 位数组工具
├── Core/                  # 核心系统代码
│   ├── Inc/               # 系统头文件
│   └── Src/               # 系统源文件
├── Drivers/               # 驱动程序
│   ├── CMSIS/             # ARM CMSIS标准
│   └── STM32F4xx_HAL_Driver/ # STM32 HAL驱动
└── MDK-ARM/               # Keil MDK项目文件
            </div>
        </section>

        <section id="features" class="section">
            <h2>功能特点</h2>
            <div class="grid">
                <div class="feature">
                    <div class="feature-icon">🔘</div>
                    <h3>按键检测</h3>
                    <p>支持多种按键事件：单击、双击、长按等</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">⚡</div>
                    <h3>防抖处理</h3>
                    <p>硬件和软件双重防抖，确保按键检测准确性</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">💡</div>
                    <h3>LED控制</h3>
                    <p>灵活的LED状态控制和显示效果</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">⏰</div>
                    <h3>任务调度</h3>
                    <p>高效的任务调度机制，支持多任务管理</p>
                </div>
            </div>
        </section>

        <section id="code" class="section">
            <h2>代码展示</h2>
            <h3>按键初始化示例</h3>
            <div class="code-block">
// 按键初始化函数
void Key_Init(void) {
    // GPIO配置
    GPIO_InitTypeDef GPIO_InitStruct = {0};
    
    // 使能GPIO时钟
    __HAL_RCC_GPIOA_CLK_ENABLE();
    
    // 配置按键引脚
    GPIO_InitStruct.Pin = KEY_PIN;
    GPIO_InitStruct.Mode = GPIO_MODE_INPUT;
    GPIO_InitStruct.Pull = GPIO_PULLUP;
    HAL_GPIO_Init(KEY_PORT, &GPIO_InitStruct);
    
    // 初始化按键组件
    ebtn_init();
}
            </div>

            <h3>LED控制示例</h3>
            <div class="code-block">
// LED控制函数
void LED_Control(uint8_t state) {
    if (state) {
        HAL_GPIO_WritePin(LED_PORT, LED_PIN, GPIO_PIN_SET);
    } else {
        HAL_GPIO_WritePin(LED_PORT, LED_PIN, GPIO_PIN_RESET);
    }
}

// LED闪烁函数
void LED_Blink(uint16_t period) {
    static uint32_t last_time = 0;
    static uint8_t led_state = 0;
    
    if (HAL_GetTick() - last_time >= period) {
        led_state = !led_state;
        LED_Control(led_state);
        last_time = HAL_GetTick();
    }
}
            </div>
        </section>

        <section id="demo" class="section">
            <h2>在线演示</h2>
            <div class="card">
                <h3>🎮 虚拟按键演示</h3>
                <p>由于这是嵌入式项目，无法直接在Web环境运行。以下是模拟演示：</p>
                
                <div style="text-align: center; margin: 2rem 0;">
                    <button class="btn" onclick="simulateKeyPress()">模拟按键按下</button>
                    <div id="led-indicator" style="width: 50px; height: 50px; border-radius: 50%; background: #ccc; margin: 1rem auto; transition: all 0.3s;"></div>
                    <p id="status">状态: 待机</p>
                </div>
                
                <div class="code-block">
                    <div id="log">系统日志:</div>
                </div>
            </div>
        </section>
    </div>

    <script>
        let ledState = false;
        let clickCount = 0;
        
        function simulateKeyPress() {
            clickCount++;
            const indicator = document.getElementById('led-indicator');
            const status = document.getElementById('status');
            const log = document.getElementById('log');
            
            // 切换LED状态
            ledState = !ledState;
            indicator.style.background = ledState ? '#4CAF50' : '#ccc';
            
            // 更新状态
            status.textContent = `状态: ${ledState ? 'LED开启' : 'LED关闭'}`;
            
            // 添加日志
            const timestamp = new Date().toLocaleTimeString();
            log.innerHTML += `<br>[${timestamp}] 按键按下 #${clickCount}, LED状态: ${ledState ? '开启' : '关闭'}`;
            log.scrollTop = log.scrollHeight;
        }
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                target.scrollIntoView({ behavior: 'smooth' });
            });
        });
    </script>
</body>
</html>